var flipCheck = 0;

function rotateCards() {
    if (flipCheck === 0) {

        document.getElementById('front-2').classList.add('showGreen');
        document.getElementById('back-2').classList.add('showRed');

        document.getElementById('front-1').classList.add('showGreen');
        document.getElementById('back-1').classList.add('showRed');

        flipCheck = 1;


        setTimeout(function () {
            document.getElementById('front-4').classList.add('showGreen');
            document.getElementById('back-4').classList.add('showRed');

            document.getElementById('front-3').classList.add('showGreen');
            document.getElementById('back-3').classList.add('showRed');


            document.getElementById('front-5').classList.add('showGreen');
            document.getElementById('back-5').classList.add('showRed');

            setTimeout(function () {


                document.getElementById('front-6').classList.add('showGreen');
                document.getElementById('back-6').classList.add('showRed');

                document.getElementById('front-7').classList.add('showGreen');
                document.getElementById('back-7').classList.add('showRed');
            }, 500);

        }, 500);

    } else {

        document.getElementById('front-2').classList.remove('showGreen');
        document.getElementById('back-2').classList.remove('showRed');

        document.getElementById('front-1').classList.remove('showGreen');
        document.getElementById('back-1').classList.remove('showRed');

        flipCheck = 0;

        setTimeout(function () {
            document.getElementById('front-3').classList.remove('showGreen');
            document.getElementById('back-3').classList.remove('showRed');

            document.getElementById('front-4').classList.remove('showGreen');
            document.getElementById('back-4').classList.remove('showRed');

            document.getElementById('front-5').classList.remove('showGreen');
            document.getElementById('back-5').classList.remove('showRed');

            setTimeout(function () {

                document.getElementById('front-7').classList.remove('showGreen');
                document.getElementById('back-7').classList.remove('showRed');

                document.getElementById('front-6').classList.remove('showGreen');
                document.getElementById('back-6').classList.remove('showRed');
            }, 500);
        }, 500);
    }
}

setInterval(rotateCards, 3000); // Time in milliseconds
"use strict";

(function () {

    var target = document.querySelector(".target");
    var links = document.querySelectorAll(".mynav a");
    var colors = ["deepskyblue", "orange", "firebrick", "gold", "magenta", "black", "darkblue"];

    function mouseenterFunc() {
        if (!this.parentNode.classList.contains("active")) {
            for (var i = 0; i < links.length; i++) {
                if (links[i].parentNode.classList.contains("active")) {
                    links[i].parentNode.classList.remove("active");
                }
                links[i].style.opacity = "0.25";
            }

            this.parentNode.classList.add("active");
            this.style.opacity = "1";

            var width = this.getBoundingClientRect().width;
            var height = this.getBoundingClientRect().height;
            var left = this.getBoundingClientRect().left + window.pageXOffset;
            var top = this.getBoundingClientRect().top + window.pageYOffset;
            var color = colors[Math.floor(Math.random() * colors.length)];

            target.style.width = width + "px";
            target.style.height = height + "px";
            target.style.left = left + "px";
            target.style.top = top + "px";
            target.style.borderColor = color;
            target.style.transform = "none";
        }
    }

    for (var i = 0; i < links.length; i++) {
        links[i].addEventListener("click", function (e) {
            return e.preventDefault();
        });
        links[i].addEventListener("mouseenter", mouseenterFunc);
    }

    function resizeFunc() {
        var active = document.querySelector(".mynav li.active");

        if (active) {
            var left = active.getBoundingClientRect().left + window.pageXOffset;
            var top = active.getBoundingClientRect().top + window.pageYOffset;

            target.style.left = left + "px";
            target.style.top = top + "px";
        }
    }

    window.addEventListener("resize", resizeFunc);
})();